<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item prop="name">
				<el-input size="small" v-model="searchForm.name" placeholder="企业名称" clearable></el-input>
			</el-form-item>


			

			<el-form-item prop="dealStatus">
				<el-select v-model="searchForm.dealStatus" placeholder="请选择 处理状态" size="small" style="width: 100%;">
					<el-option v-for="item in $dictUtils.getDictList('al_deal_status')" :key="item.value"
						:label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			

			<el-form-item prop="industrialDate">
				<el-date-picker v-model="searchForm.industrialDate" type="daterange" size="small" align="right"
					value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="工商注册日期"
					end-placeholder="工商注册日期">
				</el-date-picker>
			</el-form-item>
			
			<el-form-item prop="registerMoney">
				<input-number-range  :precision="2" v-model="searchForm.registerMoney" 
				placeholderLeft="最小注册资本"
				placeholderRight="最大注册资本">
			</input-number-range>
			</el-form-item>
			

			<!-- <el-form-item prop="beginRegisterMoney">
				<el-input type="number" size="small" v-model="searchForm.beginRegisterMoney" placeholder="最小注册资本(万)"
					clearable></el-input>
				</el-form-item>
				<el-form-item> - </el-form-item>
				<el-form-item prop="endRegisterMoney">
				<el-input type="number" size="small" v-model="searchForm.endRegisterMoney" placeholder="最大注册资本(万)"
					clearable></el-input>
			</el-form-item> -->


			<el-form-item prop="registerDate">
				<el-date-picker v-model="searchForm.registerDate" type="daterange" size="small" align="right"
					value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="成立日期"
					end-placeholder="成立日期">
				</el-date-picker>
			</el-form-item>

			<el-form-item prop="dealUser">
				<el-input size="small" v-model="searchForm.dealUser" placeholder="处理人" clearable></el-input>
			</el-form-item>


			<el-form-item prop="phone">
				<el-input size="small" v-model="searchForm.phone" placeholder="联系电话" clearable></el-input>
			</el-form-item>

			<el-form-item prop="companyType">
				<el-select v-model="searchForm.companyType" placeholder="请选择 体制类型" size="small" style="width: 100%;">
					<el-option v-for="item in $dictUtils.getDictList('al_company_type')" :key="item.value"
						:label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>


			<el-form-item prop="dealTime">
				<el-date-picker v-model="searchForm.dealTime" type="daterange" size="small" align="right"
					value-format="yyyy-MM-dd" unlink-panels range-separator="至" start-placeholder="处理日期"
					end-placeholder="处理日期">
				</el-date-picker>
			</el-form-item>

				<el-form-item>
				<el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
				<el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
				</el-form-item>

		</el-form>

		<div class="bg-white top">
			<vxe-toolbar :refresh="{ query: refreshList }" export print custom>
				<template #buttons>
					<el-button v-if="hasPermission('regulatory:property:regulatoryPropertyArchives:add')" type="primary"
						size="small" icon="el-icon-plus" @click="add()">新建</el-button>
					<!-- <el-button v-if="hasPermission('regulatory:property:regulatoryPropertyArchives:edit')"
						type="warning" size="small" icon="el-icon-edit-outline" @click="edit()"
						:disabled="$refs.propertyArchivesTable && $refs.propertyArchivesTable.getCheckboxRecords().length !== 1"
						plain>修改</el-button> -->
					<el-button v-if="hasPermission('regulatory:property:regulatoryPropertyArchives:del')" type="danger"
						size="small" icon="el-icon-delete" @click="del()"
						:disabled="$refs.propertyArchivesTable && $refs.propertyArchivesTable.getCheckboxRecords().length === 0"
						plain>删除</el-button>

				</template>
			</vxe-toolbar>
			<div style="height: calc(100% - 80px);">
				<vxe-table border="inner" auto-resize resizable height="auto" :loading="loading" size="small"
					ref="propertyArchivesTable" show-header-overflow show-overflow highlight-hover-row :menu-config="{}"
					:print-config="{}" :import-config="{}" :export-config="{}" @sort-change="sortChangeHandle"
					:sort-config="{ remote: true }" :data="dataList" :checkbox-config="{}">
					<vxe-column  type="checkbox" width="50px"></vxe-column>
					<vxe-column title="序号" type="seq" width="50"></vxe-column>
					<vxe-column field="name" title="企业名称" width="200" >
						<!-- <template slot-scope="scope">
							<el-link type="primary" :underline="false"
								v-if="hasPermission('regulatory:property:regulatoryPropertyArchives:edit')"
								@click="edit(scope.row.id)">{{scope.row.remarks}}</el-link>
							<el-link type="primary" :underline="false"
								v-else-if="hasPermission('regulatory:property:regulatoryPropertyArchives:view')"
								@click="view(scope.row.id)">{{scope.row.remarks}}</el-link>
							<span v-else>{{scope.row.remarks}}</span>
						</template> -->
					</vxe-column>
					<vxe-column field="companyType" title="体制类型">
						<template slot-scope="scope">
							{{ $dictUtils.getDictLabel("al_company_type", scope.row.companyType, '-') }}
						</template>
					</vxe-column>
					<vxe-column field="industrialDate" title="工商注册日期">
					</vxe-column>
					<vxe-column field="registerMoney" title="注册资本(万)">
					</vxe-column>
					<vxe-column field="registerDate" title="成立日期">
					</vxe-column>
					<vxe-column field="linkPhone" title="联系电话">
						<template slot-scope="scope">
							{{ scope.row.linkPhone | hideMiddle }}
						</template>
					</vxe-column>
					<vxe-column field="dealUserName" title="处理人">
					</vxe-column>
					<vxe-column field="dealStatus" title="处理状态">
						<template slot-scope="scope">
							<el-tag type="success" v-if="scope.row.dealStatus == '2'">{{
								$dictUtils.getDictLabel("al_deal_status", scope.row.dealStatus, '-') }}</el-tag>
							<el-tag type="danger" v-else-if="scope.row.dealStatus == '1'">{{
								$dictUtils.getDictLabel("al_deal_status", scope.row.dealStatus, '-') }}</el-tag>
							<el-tag type="warning" v-else>{{ $dictUtils.getDictLabel("al_deal_status", scope.row.dealStatus,
								'-') }}</el-tag>

						</template>
					</vxe-column>
					<!-- <vxe-column field="dealTime" title="处理日期">
					</vxe-column> -->
					<!-- <vxe-column field="dealNote" title="处理备注">
					</vxe-column> -->
					<!-- 	<vxe-column field="remarks" sortable title="备注信息">
						<template slot-scope="scope">
							<el-link type="primary" :underline="false"
								v-if="hasPermission('regulatory:property:regulatoryPropertyArchives:edit')"
								@click="edit(scope.row.id)">{{scope.row.remarks}}</el-link>
							<el-link type="primary" :underline="false"
								v-else-if="hasPermission('regulatory:property:regulatoryPropertyArchives:view')"
								@click="view(scope.row.id)">{{scope.row.remarks}}</el-link>
							<span v-else>{{scope.row.remarks}}</span>
						</template>
					</vxe-column> -->
					<vxe-column fixed="right" align="center" width="200" title="操作">
						<template slot-scope="scope">
							<el-button 
								type="text" icon="el-icon-view" size="small" @click="view(scope.row.id)">查看</el-button>
							<el-button v-if="scope.row.dealStatus !== '2' && hasPermission('regulatory:property:regulatoryPropertyArchives:edit')"
								type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
							<el-button v-if="scope.row.dealStatus !== '2' && hasPermission('regulatory:property:regulatoryPropertyArchives:del')"
								type="text" icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
						</template>
					</vxe-column>
				</vxe-table>
				<vxe-pager background size="small" :current-page="tablePage.currentPage" :page-size="tablePage.pageSize"
					:total="tablePage.total" :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
					:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
					@page-change="currentChangeHandle">
				</vxe-pager>
			</div>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<PropertyArchivesForm ref="propertyArchivesForm" @refreshDataList="refreshList">
		</PropertyArchivesForm>
		<!-- 查看审核-->
		<PropertyArchivesFormByMy ref="propertyArchivesFormByMy" @refreshDataList="refreshList">
		</PropertyArchivesFormByMy>

	</div>
</template>

<script>
import PropertyArchivesForm from './PropertyArchivesForm'
import PropertyArchivesFormByMy from './PropertyArchivesFormByMy'
import PropertyArchivesService from '@/api/regulatory/property/PropertyArchivesService'
import InputNumberRange from '@/components/inputNumberRange'
export default {
	data() {
		return {
			searchForm: {
				name: '',
				method: 'byMy',
				phone: '',
				dealStatus: '',
				companyType: '',
				registerDate: '',
				registerMoney: '',
				industrialDate: '',
				dealUser: '',
				dealTime: '',
			},
			dataList: [],
			tablePage: {
				total: 0,
				currentPage: 1,
				pageSize: 10,
				orders: []
			},
			loading: false
		}
	},
	components: {
		PropertyArchivesForm,
		PropertyArchivesFormByMy,
		InputNumberRange

	},
	propertyArchivesService: null,
	created() {
		this.propertyArchivesService = new PropertyArchivesService()
	},
	activated() {
		this.refreshList()
	},
	methods: {
		// 获取数据列表
		refreshList() {
			console.log("registerMoney："+this.searchForm.registerMoney[0]);
			this.loading = true
			this.propertyArchivesService.list({
				'current': this.tablePage.currentPage,
				'size': this.tablePage.pageSize,
				'orders': this.tablePage.orders,
				beginRegisterDate: this.searchForm.registerDate[0],
				endRegisterDate: this.searchForm.registerDate[1],
				beginIndustrialDate: this.searchForm.industrialDate[0],
				endIndustrialDate: this.searchForm.industrialDate[1],
				beginDealTime: this.searchForm.dealTime[0],
				endDealTime: this.searchForm.dealTime[1],
				beginRegisterMoney: this.searchForm.registerMoney[0],
				endRegisterMoney: this.searchForm.registerMoney[1],
				...this.lodash.omit(this.searchForm, 'registerDate', 'registerMoney', 'industrialDate', 'dealTime')
				// ...this.searchForm
			}).then(({
				data
			}) => {
				this.dataList = data.records
				this.tablePage.total = data.total
				this.loading = false
			})
		},
		// 当前页
		currentChangeHandle({
			currentPage,
			pageSize
		}) {
			this.tablePage.currentPage = currentPage
			this.tablePage.pageSize = pageSize
			this.refreshList()
		},
		// 排序
		sortChangeHandle(column) {
			this.tablePage.orders = []
			if (column.order != null) {
				this.tablePage.orders.push({
					column: this.$utils.toLine(column.property),
					asc: column.order === 'asc'
				})
			}
			this.refreshList()
		},
		// 新增
		add() {
			this.$refs.propertyArchivesForm.init('add', '')
		},
		// 修改
		edit(id) {
			id = id || this.$refs.propertyArchivesTable.getCheckboxRecords().map(item => {
				return item.id
			})[0]
			this.$refs.propertyArchivesForm.init('edit', id)
		},
		// 查看
		view(id) {
			this.$refs.propertyArchivesFormByMy.init('view', id)
		},
		// 删除
		del(id) {
			let ids = id || this.$refs.propertyArchivesTable.getCheckboxRecords().map(item => {
				return item.id
			}).join(',')
			this.$confirm(`确定删除所选项吗?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.loading = true
				this.propertyArchivesService.delete(ids).then(({
					data
				}) => {
					this.$message.success(data)
					this.refreshList()
					this.loading = false
				})
			})
		},
		resetSearch() {
			this.$refs.searchForm.resetFields()
			this.refreshList()
		},
		
	},
	//数据脱敏
	filters: {
		hideMiddle(val) {
			return `${val.substring(0, 3)}****${val.substring(val.length - 4)}`
		}
	}
}
</script>
<!-- <style  lang="scss" scoped>
.dashboard {
	color: black;
    // margin: 30px;
    font-size: 17px;
    line-height: 31px;
}
</style> -->
